<template>
  <div class="equipment-warn">
    <div class="title blueTitleStyle">设备预警</div>
    <div class="main colcenterbox">
      <!-- <el-table :data="newalarmList"
                style="width: 100%"
                height="100%"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName">
        <el-table-column prop="alarmTime"
                         label="告警时间"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="stationName"
                         label="告警电站"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="deviceName"
                         label="告警设备"
                         :show-overflow-tooltip="true"></el-table-column>
      </el-table>-->
      <!-- <div class="main-title">
        <div class="item">告警时间</div>
        <div class="item">告警电站</div>
        <div class="item">告警设备</div>
      </div>-->
      <!-- <div class="warn_box" v-if="nodata">
        <Nodata />
      </div>-->
      <!-- <div class="warn_box">
        <ul class="warn_list" :class="{warn_top:animate}">
          <li
            :class="index%2==0?'lione':'litwo'"
            v-for="(item, index) in newalarmList2"
            :key="index"
          >
            <span class="spanone" style="width:30%;min-width:30%;max-width:30%;" :title="item.time" v-if="item.time">{{ item.time}}</span>
            <span class="spanone" style="width:30%;min-width:30%;max-width:30%;" :title="item.stationName">{{ item.stationName }}</span>
            <span class="spanone" style="width:40%;min-width:40%;max-width:40%;" :title="item.deviceName">{{ item.deviceName }}</span>
          </li>
        </ul>
      </div>-->
      <div class="warn_box">
        <ul class="warn_list" id="warnList2" :class="{warn_top:animate}">
          <li
            :class="index%2==0?'lione':'litwo'"
            v-for="(item, index) in newalarmList"
            :key="index"
          >
            <!-- <span
              class="spantwo"
              :title="item.time"
            >{{ item.time.substring(0,10) + "\n" + item.time.substring(10)}}</span>-->
            <span class="spanone" :title="item.time">{{ item.time }}</span>
            <span class="spanone" :title="item.stationName">{{ item.stationName }}</span>
            <span class="spanone" :title="item.deviceName">{{ item.deviceName }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import Nodata from "../../../../components/Nodata/index.vue";
interface tableDataList {
  index: number;
  alarmTime: string;
  alarmPowerStation: string;
  alarmEquipment: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
@Component({ components: { Nodata } })
export default class extends Vue {
  //数据状态
  nodata = false;
  tableData: Array<tableDataList> = [
    {
      index: 1,
      alarmTime: "2019-12-01",
      alarmPowerStation: "110kV商西变电站",
      alarmEquipment: "变压器",
    },
    {
      index: 2,
      alarmTime: "2019-12-01",
      alarmPowerStation: "110kV商西变电站",
      alarmEquipment: "变压器",
    },
    {
      index: 3,
      alarmTime: "2019-12-01",
      alarmPowerStation: "110kV商西变电站",
      alarmEquipment: "变压器",
    },
  ];
  tableSelect: Array<object> = [];

  private animate: boolean = false;
  private smartScrollTimer; // 滚动定时器

  get alarmList() {
    var allList = GetSocketModule.AllAuxiliaryPointer || [];
    // console.log('allList:',allList);
    // 筛出辅控五个系统的数据
    let fkdata = ["01", "02", "04", "05", "06"];
    var arr = [];
    allList.map((k, j) => {
      if (k.isGj === "gj" && fkdata.indexOf(k.xtValue) > -1) {
        if (k.time && k.message) {
          arr.push(k);
        }
      }
    });
    arr = arr.slice(0, 50);

    return arr;
  }

  // 监听智能联动滚动列表
  get newalarmList() {
    this.openInterval();
    if (this.alarmList.length < 1) {
      return this.newalarmList2;
    } else {
      return this.alarmList;
    }
  }
  newalarmList2 = [
    {
      time: "2020-11-18 08:59:00",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外SF6气体浓度传感器",
    },
    {
      time: "2020-11-18 06:36:03",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外设备室西温湿度传感器",
    },
    {
      time: "2020-11-18 09:33:40",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外设备室西北SF6气体浓度传感器",
    },
    {
      time: "2020-11-18 07:13:06",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外变电站微气象传感器",
    },
    {
      time: "2020-11-18 05:13:06",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外变电站微气象传感器",
    },
    {
      time: "2020-11-18 04:13:06",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外变电站微气象传感器",
    },
    {
      time: "2020-11-18 03:13:06",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外变电站微气象传感器",
    },
    {
      time: "2020-11-18 03:13:06",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外变电站微气象传感器",
    },
    {
      time: "2020-11-18 03:13:06",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外变电站微气象传感器",
    },
    {
      time: "2020-11-18 03:13:06",
      stationName: "110kV天平变电站",
      deviceName: "220kV室外变电站微气象传感器",
    },
  ];
  // 开启定时滚动
  private openInterval() {
    if (this.smartScrollTimer === undefined) {
      // 启动主变负载滚动
      this.smartScrollTimer = setInterval(this.showwarn, 2000);
    }
  }

  // 关闭定时滚动
  private closeInterval() {
    if (this.smartScrollTimer) {
      clearInterval(this.smartScrollTimer);
      this.smartScrollTimer = undefined;
    }
  }

  // 滚动机制
  private showwarn() {
    this.animate = true;
    setTimeout(() => {
      if (this.alarmList.length < 1) {
        this.newalarmList2.push(this.newalarmList2[0]);
        this.newalarmList2.shift();
      } else {
        this.alarmList.push(this.alarmList[0]);
        this.alarmList.shift();
      }
      this.animate = false;
    }, 500);
  }

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);

    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  mounted() {
    let warnList = document.getElementById("warnList2");
    // 鼠标移入滚动列表，关闭定时器
    warnList.onmouseover = () => {
      this.closeInterval();
    };
    // 鼠标移出滚动列表，判断是否关闭定时器
    warnList.onmouseout = () => {
      if (this.alarmList.length > 8) {
        this.openInterval();
      } else {
        this.closeInterval();
      }
    };
  }
}
</script>

<style lang="scss" scoped>
.equipment-warn {
  width: 100%;
  height: 100%;
  .title {
    height: 0.3rem;
  }
  .main {
    width: 100%;
    height: calc(100% - 0.3rem);
    padding: 0.1rem 0.15rem;
    &-title {
      width: 100%;
      height: 0.24rem;
      display: flex;
      justify-content: space-around;
      text-align: center;
      background: rgb(51, 91, 178);
      .item {
        font-size: 0.14rem;
        width: 33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .warn_box {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .warn_list {
      width: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      .lione {
        // background: rgba(55, 74, 123, 0.65);
      }
      .litwo {
        // background: transparent;
      }
    }
    .warn_list li {
      cursor: pointer;
      height: 0.24rem;
      font-size: 0.12rem;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-content: center;
    }
    .spanone {
      line-height: 0.24rem;
      text-align: center;
      width: 33%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .spantwo {
      text-align: center;
      width: 33%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }
    .warn_top {
      transition: all 0.5s;
      margin-top: -0.24rem;
    }
  }
}
</style>